<template>
     <div class="time_cont">
            <div class="flex_center" >
                <span class="lebal">申请日期</span>
                <el-date-picker
                    v-model="form.startDate"
                    type="date"
                    :value-format="'yyyy-MM-dd'"
                    :picker-options="{
                        disabledDate: disabledDate,
                    }"
                    placeholder="选择日期"
                    style="width: 51.0rem;"
                  >
                </el-date-picker>
            </div>
            <div class="flex_center" >
                <span class="lebal">开始时间</span>
                <el-time-select
                    v-model="form.startTime"
                    :picker-options="{
                        start: '05:00',
                        step: '00:30',
                        end: '22:30'
                    }"
                    placeholder="选择时间"
                    @change="changeStartTime"
                    style="width: 51.0rem;"
                    >
                </el-time-select>
            </div>
            <div class="flex_center" >
                <span class="lebal">结束时间</span>
                <el-time-select
                    v-model="form.endTime"
                    :picker-options="endTimeOptions"
                    style="width: 51.0rem;"

                    placeholder="选择时间">
                </el-time-select>
            </div>
            <div class="btn_const flex_center" v-loading="loading">
                <div class="btn_item bgtheme cur" @click="submit">提交</div>
                <div class="btn_item flex_c_c rest cur" @click="allDay(2)"><img src="@/assets/img/rest.png"/> 全天休息</div>
                <div class="btn_item flex_c_c work cur" @click="allDay(1)"><img src="@/assets/img/work.png" />全天工作</div>
            </div>

            <bear_dialogVue
                ref="bearDialog"
                title="休息时间申请"
                :width="'38%'"
                :height="'60vh'"
                :marginTop="'20vh'"
                :closeCallBack="dialogCallBack"
            >
            <div class="flex_center_center h_full">
                <img class="" src="@/assets/img/hint.png" alt="" srcset="">
                <p class="" style="margin-top: 4.0rem; font-size: 1.6rem;color: #1A1A1A;"> 确认{{dayTime}}全天{{ form.type == 1 ? '工作' : '休息' }}？</p>
            </div>
            </bear_dialogVue>
    </div>
</template>
<script>
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import { applyRest } from '@/api/rest.js'
export default {
    components:{
        bear_dialogVue
    },
    data() {
        return {
            loading: false,
            form: {
                startDate: '',
                startTime: '',
                endTime: '',
                type: 2 // 1: 工作  2：休息
            },
            endTimeOptions: {
                start: '',
                end: '',
                step: '00:30'
            },
            dayTime:''
        }
    },
    methods:{
        changeStartTime() {
            let startTime = this.form.startTime
            let hour = startTime.split(':')[0]
            let minute = startTime.split(':')[1]
            let newHour = Number(hour) + 1
            if (newHour < 10) {
                newHour = '0' + newHour
            }
            let start = newHour + ':' + minute
            this.endTimeOptions.start = start
            this.endTimeOptions.end = '23:30'
        },
        submit() {
            if (!this.form.startDate) {
                this.$message.error('请选择申请日期')
                return
            }
            if (!this.form.startTime) {
                this.$message.error('请选择开始时间')
                return
            }
            if (!this.form.endTime) {
                this.$message.error('请选择结束时间')
                return
            }

            let param = {
                startTime: this.form.startDate + ' ' + this.form.startTime + ':00',
                endTime: this.form.startDate + ' ' + this.form.endTime + ':00',
                type: this.form.type
            }

            this.loading = true
            applyRest(param).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.$message.success('申请成功')
                    window.location.reload()
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        dialogCallBack(i){
            if (i == 1) {
                let param = {
                    startTime: this.form.startDate + ' ' + '00:00:00',
                    endTime: this.form.startDate + ' ' + '23:59:59',
                    type: this.form.type
                }
                this.loading = true
                applyRest(param).then(res => {
                    this.loading = false
                    if (res.error == 0) {
                        this.$message.success('申请成功')
                        window.location.reload()
                    }else{
                        this.$message.error(res.msg)
                    }
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        //全天申请
        allDay(type) {
            if (!this.form.startDate) {
                this.$message.error('请选择申请日期')
                return
            }
            this.form.type = type
            let arr = this.form.startDate.split('-')
            this.dayTime = arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
            this.$refs.bearDialog.openDialog()
        },
        //禁用今天之前的日期
        disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.time_cont{
    width: 100%;
    flex: 1;
    .flex_center{
        margin-bottom: 3.2rem;
        font-size: 1.8rem;
        .lebal{
            font-size: 1.8rem;
            color: #3A3F5E;
            margin-right: 1.6rem;
        }

        .btn_item{
            width: 15.4rem;
            height: 5.2rem;
            line-height: 5.2rem;
            border-radius: 1.0rem;
            text-align: center;
            color: #fff;
            img{
                width: 2.0rem;
            }
        }
        .rest{
            background: rgba($color: #F69B2C, $alpha: .1);
            margin: 0 2.4rem;
            color: #F69B2C;
        }
        .work{
            color: #40D463;
            background: rgba($color: #40D463, $alpha: .1);
        }
    }
    .btn_const{
        margin-left: 8.8rem;
    }
}
</style>
